<template>
  <div>
    <div class="flex flex-center"
      style="height: 120px;padding: 0 15px 0 0;overflow:hidden; border: none;border-top: 1px #606266 solid;">
      <div class="z-message-l" style="font-size:54px;font-weight:600" :class="'msg-bg-' + getMsgsType">
        {{getName}}</div>
      <div class="z-message-box" ref="messageBox">
        <p v-for="(msg,ind) in msgs.filter((m,i)=>i<20)" :key="ind" @click="showmsgBox(msg)"
          style="line-height: 40px;font-size: 28px;font-weight: 700;margin: 0 0;cursor: pointer;"
          :class="'msg-text-' + msg.type">{{msg.text}}</p>
      </div>
      <audio ref="ngWav" src="@/assets/mp3/NG.wav" :autoplay="false" style="display:none"></audio>
      <audio ref="okWav" src="@/assets/mp3/OK.wav" :autoplay="false" style="display:none"></audio>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="60%" :modal-append-to-body="false"
      @close="(dialogVisible = false,showMsg = '')">
      <span style="font-size:28px;color:#d9d9d9;padding:20px;line-height:40px">{{ showMsg }}</span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    msgs: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      showType: ['normal', 'error', 'success'],
      dialogVisible: false,
      showMsg: '',
    }
  },
  computed: {
    getMsgsType: function () {
      if (this.msgs.length == 0) return 'normal'
      return this.msgs[0].type
    },
    getName: function () {
      if (this.msgs.length == 0) return ''
      else if (this.msgs[0].type == 'success') return 'OK'
      else if (this.msgs[0].type == 'error') return 'NG'
      return ''
    },
  },
  mounted() {},
  watch: {
    msgs: {
      deep: true,
      handler(v) {
        //滚动到顶
        this.$nextTick(() => {
          this.$refs.messageBox.scrollTop = 0
        })
        if (this.msgs.length > 0) {
          if (this.msgs[0].type == 'success') this.$refs.okWav.play()
          else if (this.msgs[0].type == 'error') this.$refs.ngWav.play()
        }
      },
    },
  },
  methods: {
    showmsgBox(item) {
      this.showMsg = item.text
      this.dialogVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.z-message-box {
  flex: 1;
  height: 120px;
  padding: 0 15px;
  overflow-y: scroll;
  overflow-x: hidden;
  border-left: 1px solid #606266;
  color: #fff;
}
.z-message-box::-webkit-scrollbar {
  width: 0;
}
.z-message-l {
  width: 120px;
  height: 120px;
  font-size: 28px;
  line-height: 120px;
  text-align: center;
}
.msg-bg-normal {
  background: inherit;
}
.msg-bg-error {
  background: red;
  color: #fff;
}
.msg-bg-success {
  background: green;
  color: #fff;
}
.msg-text-error {
  color: red;
}
.msg-text-success {
  color: green;
}
::v-deep .el-dialog__header {
  padding: 0;
}
::v-deep .el-dialog__body {
  background: #333333;
  color: #fff;
  min-height: 200px;
  padding: 40px 34px;
}
::v-deep .el-dialog__wrapper {
  background: rgba($color: #000, $alpha: 0.1);
}
::v-deep .el-dialog__headerbtn {
  font-size: 28px;
  top: 10px !important;
  right: 10px !important;
}
</style>